<template>
  <div class="checkCountry">
    <van-nav-bar
      class="header"
      :fixed="true"
      left-arrow
      title="选择国家或地区"
      :border="false"
      @click-left="goBack"
    >
    </van-nav-bar>
    <div class="searchInput">
      <van-search v-model="state.value" placeholder="请输入国家或地区" />
    </div>
    <div class="contentWapper">
      <div
        v-show="!state.value"
        class="topName"
        v-for="item in countryData.chinaCountryInfos"
        :key="item.countryCode"
        @click="checkCountry(item)"
      >
        {{ item.countryCnname }}
      </div>
      <van-index-bar
        :sticky="state.value === '' ? true : false"
        class="content"
        highlight-color="#208CFF"
      >
        <div v-for="item in countryData.firstList" :key="item">
          <van-index-anchor v-show="!state.value" :index="item" />
          <van-cell
            v-show="searchValue(child.countryCnname) != '-1'"
            :title="child.countryCnname"
            v-for="child in countryData.countryInfos[item]"
            :key="child.countryCode"
            @click="checkCountry(child)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script setup>
import countryData from "../../../assets/js/countryData";
import { reactive } from "vue";

const emit = defineEmits(["checkCountryEmit", "checkCountryShow"]);

const state = reactive({
  type: "", // 判断给国籍赋值还是证件集的签发地赋值
  index: "", // 判断给哪个证件集签发地赋值
  value: ""
});

const searchValue = params => {
  if (state.value) {
    return params.indexOf(state.value);
  } else {
    return true;
  }
};

const goBack = () => {
  setTimeout(() => {
    emit("checkCountryShow", false);
  }, 200);
};

const checkCountry = params => {
  params = {
    ...params,
    index: state.index,
    type: state.type
  };
  emit("checkCountryEmit", params);
  goBack();
};

// 父组件赋值给子组件
const SetType = val => {
  state.type = val;
};
const SetIndex = val => {
  state.index = val;
};

// 子组件的属性暴露给父组件
defineExpose({
  SetType,
  SetIndex
});
</script>

<style lang="less" scoped>
.checkCountry {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 102;
  background: #f2f3f5;
  width: 100%;
  overflow: auto;
  :deep(.van-nav-bar-title) {
    font-weight: 600;
  }
  .header {
    z-index: 103;
    .right {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: rgba(32, 140, 255, 1);
      line-height: 14px;
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
  }
  .contentWapper {
    position: fixed;
    top: 98px;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 102;
    overflow-y: scroll;
    background: #f2f3f5;
    .topName {
      padding: 0 15px;
      background: white;
      border-top: 1px solid #f2f2f2;
      line-height: 44px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .searchInput {
    position: fixed;
    top: 45px;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 102;
    background: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 1);
    :deep(.van-search__content) {
      border-radius: 20px;
    }
  }
}
</style>
